<template>
  <el-descriptions class="orderDetailInfo" :column="3" border>
    <el-descriptions-item label-class-name="detailImg">
      <template slot="label">
        <i class="el-icon-picture"></i>
        图书照片
      </template>
      <el-image
          style="width: 100px; height: 100px;padding: 0px"
          :src="dish.imgUrl"
      ></el-image>
    </el-descriptions-item>
    <el-descriptions-item style="width: 200px;">
      <template slot="label">
        <i class="el-icon-food"></i>
        图书名
      </template>
      {{dish.title}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-money"></i>
        单价
      </template>
      {{dish.price}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label" >
        <i class="el-icon-box"></i>
        所属分类
      </template>
      {{dish.dishCategory.categoryName}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-s-opportunity"></i>
        数量
      </template>
      <el-tag type="success">{{dish.number}}份</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        小计
      </template>
      <el-tag size="small">￥{{(dish.price*dish.number).toFixed(2)}}</el-tag>
    </el-descriptions-item>

  </el-descriptions>
</template>

<script>
export default {
  name: "OrderDetailInfo",
  props:["dish"]

}
</script>

<style scoped>
.orderDetailInfo{
  margin-bottom: 10px;
}
</style>
